<template>
	<view>
		<button type="default">按钮</button>
		<!-- confirm-type: 确定按钮的类型。仅在type=text有效 -->
		<input type="text" placeholder="请输入" placeholder-style="color:orange" placeholder-class="iptClass"
			confirm-type="search" />

	</view>

	<view class="container">
		<view class="box" v-for="(item,index) in picList" :key="item.id">
			<view class="img">
				<!-- layzy-load:懒加载 -->
				<image lazy-load :src="item.url" mode="aspectFill" @click="previewImg(index)"></image>
			</view>
			<view class="text">
				{{item.content}}
			</view>
			<view class="author">
				{{item.author}}
			</view>
		</view>
		
		<!-- 刷新和回到顶部 -->
		<view class="float">
			<view class="item" @click="refresh">刷新</view>
			<view class="item" @click="goTop">顶部</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	const picList = ref([]);
	// 1.触底生命周期
	onReachBottom(() => {
		request();
	})
	
	// 4.下拉刷新生命周期
	onPullDownRefresh(()=>{
		picList.value = [];
		request()
	})
	// 2.预览图片。index:当前图片序列
	const previewImg = (index) => {
		uni.previewImage({
			// 生成urls
			urls: picList.value.map(item => item.url),
			current: index
		})
	}

	// 3.获取图片的请求
	const request = async () => {
		uni.showNavigationBarLoading();
		const {
			data
		} = await uni.request({
			url: 'https://tea.qingnian8.com/tools/petShow',
			data: {
				size: 10
			},
			header: {
				"access-ley": ''
			}
		});
		console.log(data);
		if (data.errCode === 0) {
			picList.value = picList.value.concat(data.data);
		} else {
			uni.showToast({
				icon:'none',
				title:data.errMsg,
				duration:2000
			})
		}
		uni.hideNavigationBarLoading(); // 关闭导航栏刷新动画
		uni.stopPullDownRefresh(); // 关闭下拉刷新动画
	}
	onLoad(() => {
		request();
	})
	
	// 按钮刷新事件
	const refresh =() => {
		uni.startPullDownRefresh();
	}
	// 回到顶部
	const goTop = () => {
		uni.pageScrollTo({
			scrollTop:0,
			duration:300
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;

		.box {
			border-radius: 20rpx;
			box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.3);
			margin-bottom: 30rpx;

			.img {
				image {
					width: 100%;
				}
			}

			.text {
				padding: 20rpx;
				font-size: 40rpx;
			}

			.author {
				padding: 20rpx;
				text-align: right;
				color: #999;
			}
		}
		.float{
			position: fixed;
			right: 50rpx;
			bottom: 150rpx;
			.item{
				width: 100rpx;
				height: 100rpx;
				color: #999;
				border-radius: 50%;
				margin-bottom: 15rpx;
				border: 1px solid #eee;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>